<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('条形统计图存积量')"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 95%">


    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>存积量预警条形统计</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="glyphicon glyphicon-circle-arrow-left" onclick="backinit()"></i>
                </a>
                <!--<a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">-->
                    <!--<i class="fa fa-wrench"></i>-->
                <!--</a>-->
                <!--<ul class="dropdown-menu dropdown-user">-->
                    <!--<li><a href="graph_flot.html#">选项1</a>-->
                    <!--</li>-->
                    <!--<li><a href="graph_flot.html#">选项2</a>-->
                    <!--</li>-->
                <!--</ul>-->
                <a class="close-link">
                    <i class="glyphicon glyphicon-remove"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content h-full">
            <div class="echarts  h-full" id="echarts-bar-chart"></div>
        </div>
    </div>


</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script type="text/javascript">

    var prefix = ctx + "yf/reports";

    var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
    var sid = '';
    // var category = ['长安区', '裕华区', '新华区', '高新区', '无极', '正定县', '藁城县', '平山'];
    // var scatterData = [21, 32, 12, 44, 33, 44, 55, 66];
    // var barData = [39, 12, 34, 60, 94, 32, 77, 34];

    var chartData = [];
    // chartData = [
    //     {name: '长安区', value: 221, warning: 309, disId: 1301},
    //     {name: '裕华区', value: 121, warning: 239, disId: 1301},
    //     {name: '新华区', value: 231, warning: 329, disId: 1301},
    //     {name: '高新区', value: 251, warning: 399, disId: 1301},
    //     {name: '正定县', value: 621, warning: 939, disId: 1301},
    //     {name: '藁城县', value: 241, warning: 329, disId: 1301},
    //     {name: '平山', value: 321, warning: 139, disId: 1301},
    //     {name: '无极', value: 221, warning: 539, disId: 1301},
    //     {name: '栾城', value: 321, warning: 639, disId: 1301}
    // ];

    $(function () {

        Initialize(sid);

        barChart.on('click', function (params) {
            if (params.seriesType == 'bar') {
                // console.log(params);
                console.log( (params.data.disId + "").length );
                // 查询 -- 只查询到区县
                if( (params.data.disId + "").length < 8 ){
                    Initialize(params.data.disId);
                }
            }
        })

    });


    function Initialize(sid) {
        $.post(prefix + "/echarets/storageBarList", {
            disId: sid,
            limit:25,
            limit2:10
        }, function (res) {
            if (res.code == 0) {
                chartData = res.rows;
                // alert( chartData.length );
                for(var i=0;i<chartData.length;i++){
                    console.log( chartData[i].name + "    " + chartData[i].value+ "    " + chartData[i].warning + "    " + chartData[i].disId );
                }

                // res.rows.forEach(function (val, index, arr) {
                //     var v = {
                //         name: val.name,//地区名
                //         value: val.value,//存积量值
                //         warning: val.warning,//预警值
                //         disId: val.disId //地区值
                //     }
                //     chartData.push(v);
                // });

                // chartData = [
                //     {name: '长安区', value: 221, warning: 309, disId: 1301},
                //     {name: '裕华区', value: 121, warning: 239, disId: 1301},
                //     {name: '新华区', value: 231, warning: 329, disId: 1301},
                //     {name: '高新区', value: 251, warning: 399, disId: 1301},
                //     {name: '正定县', value: 621, warning: 939, disId: 1301},
                //     {name: '藁城县', value: 241, warning: 329, disId: 1301},
                //     {name: '平山', value: 321, warning: 139, disId: 1301},
                //     {name: '无极', value: 221, warning: 539, disId: 1301},
                //     {name: '栾城', value: 321, warning: 639, disId: 1301}
                // ];

                var option = {
                    // backgroundColor: '#000000',
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (val) {
                            let color = '';
                            if ((val[0].axisValue == 'E' || val[0].axisValue == 'G') && val[0].value > threshold[val[0].dataIndex]) {
                                color = '#FCE149';
                            } else {
                                color = '#37C611';
                            }
                            return `${val[0].name}<br/>
										<span style='color:#3AB6EB;'>   ● </span>${val[1].seriesName}: ${val[0].data.warning}kg<br/>
                                        <span style=color:${color};'>   ● </span>${val[0].seriesName}: ${val[0].data.value}kg`

                        },
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                show: false,
                                fontSize: 11,
                                backgroundColor: '#000'
                            }
                        }
                    },
                    legend: {
                        data: ['总积存量', '预警值'],
                        top: '3%',
                        right: '10%',
                        textStyle: {
                            color: '#000'
                        }
                    },
                    xAxis: {
                        data: chartData.map(x => {
                            if (x.name.length > 8) {
                                return x.name.substring(0, 8) + "...";
                            } else {
                                return x.name;
                            }
                        }),
                        axisLabel: {					//---坐标轴 标签
                            interval: 0    // 0：表示全部显示不间隔
                        },
                        axisLine: {     //标尺 横向
                            lineStyle: {
                                color: '#000'
                            }
                        }
                    },
                    yAxis: {
                    splitLine: {show: false},
                    axisLabel: {
                        // formatter: '{value}Kg'
                    },
                    axisLine: { // 标尺 竖向
                        lineStyle: {
                            color: '#000'
                        }
                    }
                },
                series: [
                    {   // 条形图
                        name: '总积存量',
                        type: 'bar',
                        barWidth: 15,
//                            label: {
//                                normal: {
//                                    show: true,
//                                    position: 'top',
//                                    fontSize: 11,
//                                    color: '#3AC712',
//                                    formatter: (val) = > {
//                                    return `${val.value}`;
//                                         }
//                                }
//                            },
                        itemStyle: {
                            normal: {
                                barBorderRadius: 5,//渐变
                                label: {
                                    show: true,		//开启显示
                                    position: 'top',	//在上方显示
                                    textStyle: {	    //数值样式
                                        color: '#14c8d4',
                                        fontSize: 12
                                    }
                                },
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#14c8d4'},
                                        {offset: 1, color: '#43eec6'}
                                    ]
                                )
                            }
                        },
                        data: chartData
                    },
                    {   // 散点图
                        name: '预警值',
                        type: 'scatter',
                        smooth: true,
                        showAllSymbol: true,
                        symbol: 'emptyCircle',
                        symbolSize: 13,
                        itemStyle: {
                            normal: {
                                label: {               // 柱顶数字
                                    show: true,		// 开启显示
                                    position: 'top',	// 在上方显示
                                    textStyle: {	    // 数值样式
                                        color: '#000',
                                        fontSize: 12
                                    }
                                }
                            }
                        },
                        data: chartData.map(x => {
                            return x.warning
                        }),
                        markLine: {silent: false}
                    }
                ]
            };

                barChart.setOption(option);
                $(window).resize(barChart.resize());
            }

        });

    }





    function backinit(){
        sid = '';
        Initialize(sid);
    }


</script>
</body>
</html>